<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .form-horizontal {
            text-align: center;
            width: 200px;
            height: 400px;
        }
    </style>
    <meta charset="UTF-8">
    <title>Login</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <!-- 引入jquery文件 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-offset-3 col-md-6">
    <h3>请登录后开始聊天</h3>
    <div class="form-horizontal">
        <div class="form-group">
            <span class="">昵称：</span>
            <input id="username" name="username" class="text" type="text" placeholder="任意字母或者中文,长度2-20之内">
        </div>
        <div class="form-group">
            <span class="">密码：</span>
            <input id="password" name="password" class="text" type="password" placeholder="6到12位的密码">
        </div>
        <button class="btn-primary" onclick="login()">登录</button>
        <button class="btn-secondary" onclick="clearAll()">重置</button>
    </div>
</div>
<script>
    function login() {
        location.href = '/v1/chat?username=' + $('#username').val() + '&password=' + $('#password').val();
    }

    function clearAll() {
        $('#username').val("");
        $('#password').val("");
    }
</script>
</body>
</html>